<template>
  <div class="hello">
    <Productone :ProductoneListArray="GoodsArray"></Productone>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        GoodsArray:[]
      }
    },
    methods: {
      arr(){
        var random =  this.$Mock.Random;
        for(var i=0;i<10;i++){
          var template = {
            icon:random.dataImage('70x70', 'mock的图片'),
            id:random.increment(),
            name:random.csentence(1,3),
            title:random.csentence(5,10),
            situation:'预约中',
            deletes:random.csentence(40,80),
            price:random.natural(5, 30),
            text: random.csentence(5, 30), //  Random.csentence( min, max )
            image: random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            date: random.date() + ' ' + random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
          }
          this.GoodsArray.push(template)
        }
      },
    },
    mounted(){
      this.arr();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
